<template>
    <div class="comments">
        <div class="comments-top">
            <span>买家评价3333</span>
            <span>
                更多
                <span class="icon iconfont icon-right"></span>
            </span>
        </div>
        <div class="comments-tag">
            <div class="comment-tag-box">
                <div>全部(333)</div>
                <div>最新(0)</div>
                <div>有图片(200)</div>
                <div>款式好(61)</div>
            </div>
            <!-- <div class="comment-tag-box">
                <div>颜色正(51)</div>
                <div>买家服务很好(21)</div>
                <div>性价比高(20)</div>
            </div>
            <div class="comment-tag-box">
                <div>包装很赞(51)</div>
                <div>礼物很喜欢(21)</div>
                <div>整体感觉不错(20)</div>
            </div>
            <div class="comment-tag-box">
                <div>物流快(51)</div>
                <div>质量很好(21)</div>
                <div>发货速度快(5)</div>
            </div>
            <div class="comment-tag-box">
                <div>料子很不错(3)</div>
                <div>颜色一般(7)</div>
                <div>有异味(5)</div>
            </div>
            <div class="comment-tag-box">
                <div>物流有点慢(5)</div>
                <div>质量一般(3)</div>
            </div> -->
        </div>
        <!-- 用户评论 start -->
        <div class="comments-user" v-for="(item, index) in 4" :key="index">
            <div>
                <div class="user-img">
                    <img src="../assets/静态资源图片/u=39145177,1248286396&fm=26&gp=0.jpg" />
                </div>
                <div class="user-info">
                    <div class="user-name">
                        <span>用户名称</span>
                    </div>
                    <div class="user-time">2018年08月30日11:52:24</div>
                </div>
            </div>
            <div
                class="user-conent"
            >哇哦好漂亮哦 包装是真滴少女心 我好喜欢呢 商家还额外赠送了化妆刷好贴心 价格实惠又好用真是好喜欢呢。。。。。。。。。。。。爱上了你打客服还不发可补发块被打死口街道办囧死发货女孩</div>
            <div class="user-showimg">
                <div>
                    <img src="../assets/静态资源图片/aaa.jpg" alt="">
                </div>
                <div>
                    <img src="../assets/Koala.jpg" alt="">
                </div>
                <div>
                    <img src="../assets/Koala.jpg" alt="">
                </div>
                <div>
                    <img src="../assets/静态资源图片/aaa.jpg" alt="">
                </div>
            </div>
        </div>
        <!-- 用户评论 end -->
    </div>
</template>

<script>
export default {};
</script>
<style lang="less" scoped>
// 评论区标签模板
.comment {
    text-align: center;
    background-color: @pink1;
    color: @pink;
    margin-right: 10px;
    line-height: 50px;
    padding: 3px 10px;
}
.comments {
    padding: 10px 20px;
    font-size: 28px;
    margin-bottom: 30px;
    background-color: white;
    .comments-top {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        > span {
            display: block;
            color: @99;
        }
    }
    .comments-tag {
        margin-top: 15px;
        .comment-tag-box {
            margin-bottom: 20px;
            height: 50px;
            display: flex;
            align-items: center;
            > div {
                .comment;
            }
        }
    }
}

.comments-user {
    padding: 20px 0;
    :first-child {
        display: flex;
        align-items: center;
        > .user-img {
            width: 150px;
            height: 150px;
            > img {
                object-fit: contain;
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        > .user-info {
            font-size: 30px;
            padding-left: 20px;
            > .user-name {
                margin-top: 10px;
                > .film-source {
                    float: right;
                }
            }
            > .user-time {
                color: @99;
            }
        }
    }
    > .user-conent {
        text-indent: 40px;
    }
    > .user-showimg {
        width: 100%;
        height: 180px;
        margin-top:30px; 
        overflow: hidden;
        > div{
            box-sizing: border-box;
            padding-right:30px; 
            float: left;
            width: 25%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            img {
                width: 100%;
            }
        }
    }
}
</style>